<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:ic="http://ivyteam.ch/jsf/component"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:pm="http://primefaces.org/mobile">


<ui:composition template="/templates/layout.xhtml">
	<ui:define name="west">
	<f:event listener="#{logic.getNumberOfEmail}" type="preRenderView"/>
		<h:form id="leftMenu">
			<p:menu>
				<p:menuitem value="Inbox(#{data.inboxCount})" actionListener="#{logic.showInbox}"
					update="@all" />
				<p:menuitem value="Dratfs(#{data.draftCount})" actionListener="#{logic.showDraftMails}"
					update="@all" />
				<p:menuitem value="Trashes(#{data.deletedCount})" actionListener="#{logic.showDeletedItems}"
					update="@all" />

			</p:menu>
		</h:form>
		<p:dialog widgetVar="showComposer" width="800px" hideEffect="scale"
			height="auto" closable="false" appendTo="@(body)" modal="true" onShow="reset()">
			<ic:ch.soreco.training.common.MailComposer sendCallBack="PF('showComposer').hide()" />
		</p:dialog>
	</ui:define>
	<ui:define name="center">
		<h:form>
			<p:commandButton value="Compose" onclick="PF('showComposer').show()" />


<p:outputPanel id="loadedEmailListPanel">

			<p:dataTable value="#{data.mailList}" var="mailItem"
				selectionMode="single" selection="#{data.selectedMail}"
				rowKey="#{mailItem.id}" type="definition">
				<p:ajax event="rowSelect" update=":mailDetail" />

				<p:column>
			 	 #{mailItem.mailSubject}  <br></br>
					<h:outputText value="sender: #{mailItem.mailFrom}"></h:outputText>
					<p:commandLink value="delete" style="float:right;"
						actionListener="#{logic.deleteMail(mailItem.id)}"
						update=":#{p:component('loadedEmailListPanel')} :mailDetail :leftMenu">
					</p:commandLink>
				</p:column>


			</p:dataTable>
</p:outputPanel>
		</h:form>
	</ui:define>
	<ui:define name="east">
		<h:form id="mailDetail">

			<p:panel id="mailContentDetail"
				rendered="#{data.selectedMail !=null}" style="margin-bottom:20px">
				<h:outputLabel value="#{data.selectedMail.mailSubject}"></h:outputLabel>
				<br></br>
				<h:outputLabel value="From: #{data.selectedMail.mailFrom}"></h:outputLabel>
				<br></br>
				<h:outputLabel value="To: #{data.selectedMail.mailTo}"></h:outputLabel>
				<br></br>
				<h:outputLabel value="Sent date: #{data.selectedMail.sendDate}"></h:outputLabel>.
						<br></br>

				<p:panel style="margin-top:40px">
					<p:outputPanel>#{data.selectedMail.mailContent}</p:outputPanel>
				</p:panel>

			</p:panel>



		</h:form>

	</ui:define>
</ui:composition>
</html>
